<script setup lang="ts">
import {onMounted, ref} from 'vue'
import { searchUser } from '@/api/relation.ts'; // 搜索用户接口
import {useRouter} from "vue-router";
import {ElMessage} from "element-plus";

// 功能菜单数据
const addFriendMenus = ref([
  {
    name: '扫一扫',
    desc: '扫描二维码名片',
    iconViewBox: '0 0 24 24',
    iconPath: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 10a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1h-2a1 1 0 01-1-1v-2zm4-6H8c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2z'
  },
  {
    name: '手机联系人',
    desc: '添加通讯录中的朋友',
    iconViewBox: '0 0 24 24',
    iconPath: 'M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2h16zm-2-4a2 2 0 012 2v2H5v-2a2 2 0 012-2h8zm-6-3a1 1 0 110-2 1 1 0 010 2zm0-5a1 1 0 110-2 1 1 0 010 2zm6 0a1 1 0 110-2 1 1 0 010 2zm0 5a1 1 0 110-2 1 1 0 010 2z'
  },
  {
    name: '雷达',
    desc: '添加身边的朋友',
    iconViewBox: '0 0 24 24',
    iconPath: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm0-14a6 6 0 00-6 6 6 6 0 006 6 6 6 0 006-6 6 6 0 00-6-6z'
  },
  {
    name: '企业微信联系人',
    desc: '通过手机号搜索企业微信用户',
    iconViewBox: '0 0 24 24',
    iconPath: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 10h2v2H8v-2h3zm4 0h2v2h-2v-2zm-4-4h2v2H8v-2h3zm4 0h2v2h-2v-2z'
  },
  {
    name: '面对面建群',
    desc: '与身边的朋友进入同一个群聊',
    iconViewBox: '0 0 24 24',
    iconPath: 'M18 6v8c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2h8c1.1 0 2 .9 2 2zm-6-4c-1.66 0-3 1.34-3 3v8c0 1.66 1.34 3 3 3s3-1.34 3-3V5c0-1.66-1.34-3-3-3zm-4 0C6.34 2 5 3.34 5 5v8c0 1.66 1.34 3 3 3s3-1.34 3-3V5c0-1.66-1.34-3-3-3zm12 0c-1.66 0-3 1.34-3 3v8c0 1.66 1.34 3 3 3s3-1.34 3-3V5c0-1.66-1.34-3-3-3z'
  },
  {
    name: '公众号',
    desc: '获取更多资讯',
    iconViewBox: '0 0 24 24',
    iconPath: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17h2v-2h-2v2zm0-4h2V7h-2v8z'
  },
  {
    name: '服务号',
    desc: '获取更多购物信息和服务',
    iconViewBox: '0 0 24 24',
    iconPath: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15h2v-2h-2v2zm0-4h2V7h-2v8z'
  }
])
// 接收路由传参用户ID
const router = useRouter();
const currentUserId = ref<number | null>(null); // 存储当前用户ID

onMounted(() => {
  //  从路由参数中提取currentUserId
  const query = router.currentRoute.value.query;
  const userIdStr = query.currentUserId as string; // 获取字符串形式的ID

  if (userIdStr) {
    currentUserId.value = Number(userIdStr); // 转换为数字
  } else {
    ElMessage.error('未获取到当前用户ID，请重新登录');
    router.push('/login');
  }
});
// 交互方法
const onBack = () => {
  router.back()

}

const onMenuClick = (item: { name: string }) => {
  alert(``)
}

const searchValue = ref(''); // 搜索输入框内容

// 搜索处理函数
const handleSearch = async () => {
  const keyword = searchValue.value.trim();
  if (!keyword) {
    ElMessage.warning('请输入搜索内容');
    return;
  }

  try {
    const res = await searchUser(keyword); // 调用后端接口
    if (res.data.code === 200) {
      const user = res.data.data;
      if (user) {
        // 跳转到详情页，传递用户ID
        await router.push({
          path: '/addfrienddetail', // 详情页路由
          query: {id: user.id.toString()}
        });
      } else {
        ElMessage.warning('该用户不存在');
      }
    } else {
      ElMessage.error(`搜索失败：${res.data.msg}`);
    }
  } catch (error: any) {
    const errMsg = error.response?.data?.msg || '网络异常';
    ElMessage.error(`搜索失败：${errMsg}`);
  }
};
</script>

<template>
  <div class="add-friend-page">
    <!-- 顶部导航栏 -->
    <header class="add-friend-header">
      <div class="header-top">
        <!-- 返回按钮 -->
        <div class="back-btn" @click="onBack">
          <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
          </svg>
        </div>
        <!-- 标题 -->
        <h1 class="header-title">添加朋友</h1>
        <!-- 右侧占位 -->
        <div class="header-placeholder"></div>
      </div>
      <!-- 搜索框 -->
      <div class="search-box">
        <svg class="search-icon"></svg>
        <!-- 新增 v-model 和 @keyup.enter -->
        <input
            type="text"
            placeholder="搜索 账号/手机号"
            class="search-input"
            v-model="searchValue"
            @keyup.enter="handleSearch"
        />
      </div>
    </header>

    <!-- 功能菜单列表 -->
    <div class="menu-list">
      <div
          v-for="(item, index) in addFriendMenus"
          :key="index"
          class="menu-item"
          @click="onMenuClick(item)"
      >
        <!-- 图标 -->
        <div class="menu-icon">
          <svg class="icon" :viewBox="item.iconViewBox">
            <path :d="item.iconPath" fill="currentColor"/>
          </svg>
        </div>
        <!-- 文字内容 -->
        <div class="menu-text">
          <div class="menu-title">{{ item.name }}</div>
          <div class="menu-desc">{{ item.desc }}</div>
        </div>
        <!-- 箭头图标 -->
        <div class="arrow-icon">
          <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 页面容器 */
.add-friend-page {
  background-color: #fff;
  height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* 顶部导航 */
.add-friend-header {
  display: flex;
  flex-direction: column;
  padding: 8px 16px;
  border-bottom: 1px solid #eee;
  background-color: #f7f7f7;
}

.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
}

.back-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.header-title {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
}

.header-placeholder {
  width: 24px; /* 与返回按钮对称，保证标题居中 */
}

.search-box {
  margin-top: 6px;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 320px;
  height: 32px;
  padding: 0 12px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 16px;
  align-self: center; /* 水平居中 */
}

.search-icon {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  color: #999;
}

.search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
}

/* 功能菜单 */
.menu-list {
  padding: 12px 16px;
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 12px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background-color 0.2s;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item:hover {
  background-color: #f5f5f5;
}

.menu-icon {
  width: 28px;
  height: 28px;
  margin-right: 12px;
}

.menu-icon .icon {
  width: 100%;
  height: 100%;
  color: #07c160; /* 微信风格绿色 */
}

.menu-text {
  flex: 1;
}

.menu-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 4px;
}

.menu-desc {
  font-size: 12px;
  color: #999;
}

.arrow-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
}

.arrow-icon .icon {
  width: 16px;
  height: 16px;
}
</style>